<template>
	<s-layout
			:title="'卖家主页'"
			:bgStyle="template.style?.background"
			:navbarStyle="template.style?.navbar"
			onShareAppMessage
	>
		<view style="margin-top: 10%; margin-bottom: 10%">
			<s-mercari-user-card :avatar="'https://images.weserv.nl/?url=' + state.sellerInfo.photo_url"
			                     :collect-num="state.sellerInfo.num_sell_items"
			                     :nickname="state.sellerInfo.name"/>
			<br>
			<button v-if="state.view === 'source'" @tap="onTranslate" class="ss-reset-button more-btn">显示译文</button>
			<button v-if="state.view === 'target'" @tap="onReset" class="ss-reset-button more-btn">显示原文</button>
			【卖家说明】<br>
			<view style="padding: 20rpx; line-height: 30rpx">
				<text v-if="state.view === 'source'" class="content">
		      {{state.sellerInfo.introduction}}
	      </text>
				<text v-if="state.view === 'target'" class="content">
		      {{state.chinese}}
        </text>
			</view>
		</view>
		<view v-if="state.iconStatus && state.pagination.total > 0" class="goods-list ss-m-t-20">
			<view
					class="ss-p-l-20 ss-p-r-20 ss-m-b-20"
					v-for="item in state.pagination.data"
					:key="item.id"
			>
				<s-goods-column
						class=""
						:tag-style="tagStyle"
						size="lg"
						:data="item"
						:topRadius="10"
						:bottomRadius="10"
						@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
				>
					<template v-slot:cart>
						<button class="ss-reset-button cart-btn" :style="[buyStyle]">
							{{ buyNowStyle.mode === 1 ? buyNowStyle.text : '' }}
						</button>
					</template>
				</s-goods-column>
			</view>
		</view>
		<view
				v-if="!state.iconStatus && state.pagination.total > 0"
				class="ss-flex ss-flex-wrap ss-p-x-20 ss-m-t-20 ss-col-top"
		>
			<view class="goods-list-box">
				<view v-for="item in state.leftGoodsList" :key="item.id" class="left-list">
					<s-goods-column
							:bottomRadius="10"
							:tag-style="tagStyle"
							:data="item"
							:topRadius="10"
							class="goods-md-box"
							size="md"
							@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
							@getHeight="mountMasonry($event, 'left')"
					>
						<template v-slot:cart>
							<button class="ss-reset-button cart-btn"></button>
						</template>
					</s-goods-column>
				</view>
			</view>
			<view class="goods-list-box">
				<view v-for="item in state.rightGoodsList" :key="item.id" class="right-list">
					<s-goods-column
							:bottomRadius="10"
							:data="item"
							:tag-style="tagStyle"
							:topRadius="10"
							class="goods-md-box"
							size="md"
							@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
							@getHeight="mountMasonry($event, 'right')"
					>
						<template v-slot:cart>
							<button class="ss-reset-button cart-btn"></button>
						</template>
					</s-goods-column>
				</view>
			</view>
		</view>
		<uni-load-more
				v-if="state.pagination.total > 0"
				:content-text="{
        contentdown: '上拉加载更多',
      }"
				:status="state.loadStatus"
				@tap="loadmore"
		/>
		<s-empty v-if="state.pagination.total === 0" icon="/static/soldout-empty.png" text="暂无商品">
		</s-empty>
	</s-layout>
</template>

<script setup>
import {computed, reactive} from 'vue';
import {onLoad, onReachBottom} from '@dcloudio/uni-app';
import sheep from '@/sheep';
import _ from 'lodash';

import SMercariUserCard from "@/sheep/components/s-mercari-user-card/s-mercari-user-card.vue";

const sys_navBar = sheep.$platform.navbar;
const emits = defineEmits(['close', 'change']);

const template = computed(() => sheep.$store('app').template.user);

const style = {
	"marginLeft": 0,
	"marginRight": 0,
	"marginTop": 70,
	"marginBottom": 10,
	"borderRadiusTop": 0,
	"borderRadiusBottom": 0,
	"background": {
		"type": "color",
		"bgImage": "",
		"bgColor": ""
	}
}

const pagination = {
	data: [],
	current_page: 1,
	total: 1,
	last_page: 1,
	size: 6
};

const tagStyle = {
	show: 1,
	src: "https://xiaozhan-shop.oss-cn-beijing.aliyuncs.com/2024/02/02708e08484a644ec69c24b02b92310a33mercari.png"
}

const buyNowStyle = {
	"mode": 0,
	"text": "立即下单",
	"color1": "#e16759",
	"color2": "#f5796f",
	"src": "\/storage\/decorate\/20221115\/4782356b4587dc4f4a218f2540a0bafc.png",
	"right": '20rpx',
	"bottom":"18rpx"
};

// 下单按钮样式
const buyStyle = computed(() => {
	if (buyNowStyle.mode === 1) {
		// button
		return {
			background: `linear-gradient(to right, ${buyNowStyle.color1}, ${buyNowStyle.color2})`,
		};
	}

	if (buyNowStyle.mode === 2) {
		// image
		return {
			width: '54rpx',
			height: '54rpx',
			background: `url(${sheep.$url.cdn(buyNowStyle.src)}) no-repeat`,
			backgroundSize: '100% 100%',
		};
	}
});

const state = reactive({
	chinese: '',
	view: 'source',
	pagination: {
		data: [],
		current_page: 1,
		total: 1,
		last_page: 1,
		size: 10
	},
	sellerInfo: {},
	currentSort: 'sort',
	currentOrder: 'desc',
	currentTab: 0,
	filterParams: {},
	curFilter: 0,
	showFilter: false,
	iconStatus: true,
	categoryId: 0,
	tabList: [
		{
			name: '综合推荐',
			value: 'sort',
			order: 'asc',
			list: [
				{
					label: '综合推荐',
					sort: 'sort',
					order: 'desc',
				},
				/*{
					label: '价格升序',
					sort: 'price',
					order: 'asc',
				},
				{
					label: '价格降序',
					sort: 'price',
					order: 'desc',
				},*/
			],
		},
		//没有销量字段，暂时隐藏
		// {
		//   name: '销量',
		//   value: 'total_sales',
		// },
		{
			name: '新品优先',
			value: 'create_time',
			order: 'desc'
		},
	],
	loadStatus: '',
	keyword: '',
	sellerId: null,
	leftGoodsList: [],
	rightGoodsList: [],
});

// 加载瀑布流
let count = 0;
let leftHeight = 0;
let rightHeight = 0;

async function getSellerInfo(sellerId) {
	const {data} = await sheep.$api.goods.sellerInfo({
		sellerId: sellerId,
	});
	state.sellerInfo = data;
}

function onTranslate() {
	if (state.chinese) {
		state.view = 'target'
		return
	}
	// 加载提示
	sheep.$helper.toast('正在翻译');
	sheep.$api.goods.translate({
		content: state.sellerInfo.introduction
	}).then(res => {
		state.chinese = res;
		state.view = 'target'
	})
}

function onReset() {
	state.view = 'source'
}

function mountMasonry(height = 0, where = 'left') {
	if (!state.pagination.data[count]) return;
	if (count % 2 === 0) {
		state.leftGoodsList.push(state.pagination.data[count]);
	} else {
		state.rightGoodsList.push(state.pagination.data[count]);
	}
	count++;
}

function emptyList() {
	state.pagination = {...pagination}
	state.leftGoodsList = [];
	state.rightGoodsList = [];
	count = 0;
	leftHeight = 0;
	rightHeight = 0;
}

//搜索
function onSearch(e) {
	state.keyword = e;
	emptyList();
	getList();
}

// 点击
function onTabsChange(e) {
	if (state.tabList[e.index].list) {
		state.currentTab = e.index;
		state.showFilter = !state.showFilter;
		return;
	} else {
		state.showFilter = false;
	}
	if (e.index === state.currentTab) {
		return;
	} else {
		state.currentTab = e.index;
	}
	emptyList();
	state.currentSort = e.value
	state.currentOrder = e.order
	getList();
}

// 点击筛选项
const onFilterItem = (val) => {
	if (
			state.currentSort === state.tabList[0].list[val].sort &&
			state.currentOrder === state.tabList[0].list[val].order
	) {
		state.showFilter = false;
		return;
	}
	state.curFilter = val;
	state.tabList[0].name = state.tabList[0].list[val].label;
	state.currentSort = state.tabList[0].list[val].sort;
	state.currentOrder = state.tabList[0].list[val].order;
	emptyList();
	getList();
	state.showFilter = false;
};

async function getList() {
	sheep.$helper.toast('商品拼命加载中...')
	state.loadStatus = 'loading';
	const params = {
		search: state.keyword,
		sellerId: state.sellerId,
	}
	const res = await sheep.$api.goods.list(params, {
		page: state.pagination.current_page - 1,
		size: state.pagination.size
	});
	const {content, totalElements, totalPages} = res;
	if (content.length === 0) {
		state.loadStatus = 'noMore';
		return;
	}
	state.pagination.data = _.concat(state.pagination.data, content)
	state.pagination.total = totalElements
	mountMasonry();
	state.loadStatus = 'more';
}

// 加载更多
function loadmore() {
	if (state.loadStatus !== 'noMore') {
		state.pagination.current_page++;
		getList();
	}
}

onLoad((options) => {
	state.keyword = options.keyword;
	state.sellerId = options.sellerId;
	getSellerInfo(state.sellerId);
	getList();
});
// 上拉加载更多
onReachBottom(() => {
	loadmore();
});
</script>

<style lang="scss" scoped>

.content {
	padding: 20rpx;
	overflow-x: scroll;
	min-width: 600rpx;
	word-wrap: break-word !important;


	pre {
		word-wrap: break-word !important;
	}
}

.goods-list-box {
	width: 50%;
	box-sizing: border-box;

	.left-list {
		margin-right: 10rpx;
		margin-bottom: 20rpx;
	}

	.right-list {
		margin-left: 10rpx;
		margin-bottom: 20rpx;
	}
}

.goods-box {
	&:nth-last-of-type(1) {
		margin-bottom: 0 !important;
	}

	&:nth-child(2n) {
		margin-right: 0;
	}
}

.list-icon {
	width: 80rpx;

	.sicon-goods-card {
		font-size: 40rpx;
	}

	.sicon-goods-list {
		font-size: 40rpx;
	}
}

.goods-card {
	margin-left: 20rpx;
}

.list-filter-tabs {
	background-color: #fff;
}

.filter-list-box {
	padding: 28rpx 52rpx;

	.filter-item {
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		line-height: normal;
		margin-bottom: 24rpx;

		&:nth-last-child(1) {
			margin-bottom: 0;
		}
	}

	.filter-item-active {
		color: var(--ui-BG-Main);
	}
}

.tab-item {
	height: 50px;
	position: relative;
	z-index: 11;

	.tab-title {
		font-size: 30rpx;
	}

	.cur-tab-title {
		font-weight: $font-weight-bold;
	}

	.tab-line {
		width: 60rpx;
		height: 6rpx;
		border-radius: 6rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 10rpx;
		background-color: var(--ui-BG-Main);
		z-index: 12;
	}
}

.more-btn {
	font-size: 24rpx;
	color: var(--ui-BG-Main);
}

.cart-btn {
	position: absolute;
	bottom: 18rpx;
	right: 20rpx;
	z-index: 11;
	height: 50rpx;
	line-height: 50rpx;
	padding: 0 20rpx;
	border-radius: 25rpx;
	font-size: 24rpx;
	color: #fff;
}
</style>
